<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload= function () {
			p = document.getElementsByTagName('p');

			// console.log(p);

			p[1].style.color="red";

			p[0].style.background= "red";

			box = document.getElementsByClassName('box');

			console.log(box);

			xbs = document.getElementById('xbs');
			console.log(xbs);

			xbs.style.color="blue";

			titleList = document.getElementsByClassName('title');

			for (var i = 0; i < titleList.length; i++) {
				if(i%2==0){
					titleList[i].style.color="blue"
				}
			}

		}
	</script>
</head>
<body>
	<p class="box">学并思1</p>
	<p id="xbs">学并思2</p>
	<span class="title">学并思</span>
	<span class="title">学并思</span>
	<span class="title">学并思</span>
	<span class="title">学并思</span>
	<span class="title">学并思</span>
	<span class="title">学并思</span>
	<span class="title">学并思</span>
	<span class="title">学并思</span>
	<span class="title">学并思</span>
	<span class="title">学并思</span>
	<!-- 1 定时器
	2 捉标签
    3 监听事件
    4 操作标签（属性(特定属性，自定义属性) 样式(行内样式，外部样式) 内容(包含标签，纯文本)） -->

	
</body>
</html>